<template>
    <el-container class="home_container">
        <el-header style="height: 60px">
            <el-row>
                <el-col :span="2">
                    <div class="tupian">
                        <img src='../assets/专利home.png' height="55px" width="55px">
                    </div>
                </el-col>
                <el-col :span="5"><span class="zhuanli">专利管理系统</span></el-col>
                <el-col :span="13">
                    <el-menu
                            :default-active="activePath"
                            :collapse-transition="false"
                            :router="true"
                            mode="horizontal"
                            background-color="#fcfcfc"
                            active-text-color="#FF6666">
                        <el-menu-item index="/index">首页</el-menu-item>
                        <el-submenu index="/register">
                            <template slot="title">版权登记</template>
                            <el-menu-item index="/SoftwareRegister">软件登记</el-menu-item>
                            <!--<el-menu-item index="/RegistrationOfWorks">作品登记</el-menu-item>-->
                        </el-submenu>
                        <el-menu-item index="/search">版权查询</el-menu-item>
                        <el-menu-item index="/HallOutlets">大厅网点</el-menu-item>
                        <el-menu-item><a href="http://www.ccopyright.com.cn/index.php?optionid=1004&time=1622896165494"
                                         target="_blank">帮助中心</a></el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="4">
                    <div >
                        <ul v-if="username==null" class="Login">
                            <el-link href="/#/Login">登录|</el-link>
                            <el-link href="/#/logon">|注册</el-link>
                        </ul>
                        <el-dropdown trigger="hover" class="nameStyle">
                            <span style="font-size: 20px">{{username}}</span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="personalCenter">收信箱</el-dropdown-item>
                                <el-dropdown-item @click.native="personalCenter">个人中心</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">安全退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                isCollapse: false,
                activePath: '/index',
                username: null,
                password: '',
            }
        },
        created() {
            this.username = window.sessionStorage.getItem('username')
            this.password = window.sessionStorage.getItem('password')
        },
        methods: {
            logout() {
                console.log("退出成功！清除session！重置路由")
                window.sessionStorage.clear(); //清除session
                this.$router.push("/index"); //重置路由
                location.reload();
            },
            personalCenter(){
                this.$router.push("/personal");//跳转到个人中心页面
            }
        }
    }
</script>

<style scoped>
    .home_container {
        height: 100%;
    }

    .el-header {
        background-color: #fcfcfc;
        /*display: flex;*/
        /*justify-content: space-between; !*左右贴边*!
       padding-left: 0%; !*左边界*!
       padding-right: 10px;*/
        font-size: 25px;
        align-items: center;
    }

    .tupian {
        padding-left: 15px;
    }

    .zhuanli {
        display: flex;
        padding-top: 5%;
        color: #6d6d6d;
    }
    .Login {
        display: flex;
        padding-left: 50%;
        align-items: center;
    }
    .nameStyle{
        display: flex;
        padding-top: 8%;
        padding-left: 50%;
        align-items: center;
        color: #4f00ff;
    }
    /deep/.el-main{
        padding: 0;
    }
    /deep/ .el-link {
        font-size: 15px;
    }

    .el-main {
        background-color: #ffffff;
    }
</style>